<template>
  <div class="appFrame">
    <div class="left">
      <div class="big_title">欢迎使用</div>
      <div class="title_tip">Serverless Future</div>
      <div
        class="toHome"
        :class="{ hover: tabIndex != index }"
        :style="{
          background:
            tabIndex == index ? 'white' : 'rgba(255, 255, 255, 0.001)',
        }"
        v-for="(tabItem, index) in tabs"
        v-bind:key="index"
        @click="toRouter(index)"
      >
        <img
          :src="tabIndex == index ? tabItem.img_se : tabItem.img"
          class="navi_img"
        />
        <div
          :style="{
            color: tabIndex == index ? '#3E7CF4' : 'white',
          }"
          class="btnTxt"
        >
          {{ tabItem.txt }}
        </div>
      </div>
      <div class="bottom_help">
        <img class="help_img" :src="help_svg" />
        <div class="help_txt">使用帮助</div>
      </div>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "frame",
  props: {
    msg: String,
  },
  data() {
    return {
      help_svg: require("./imgs/help.svg"),
      tabs: [
        {
          txt: "函数总览",
          img: require("./imgs/1.svg"),
          img_se: require("./imgs/1-se.svg"),
        },
        {
          txt: "新建函数",
          img: require("./imgs/2.svg"),
          img_se: require("./imgs/2-se.svg"),
        },
        {
          txt: "集群状态",
          img: require("./imgs/3.svg"),
          img_se: require("./imgs/3-se.svg"),
        },
        {
          txt: "设置",
          img: require("./imgs/5.svg"),
          img_se: require("./imgs/5-se.svg"),
        },
      ],
      tabIndex: 0,
    };
  },
  methods: {
    toRouter: function (index) {
      this.tabIndex = index;
      this.$router.push(["/total", "/new", "/k8s", "/setting"][index]);
    },
  },
};
</script>

<style scoped>
.bottom_help img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.bottom_help:hover {
  opacity: 0.5;
}
.bottom_help {
  cursor: pointer;
  position: absolute;
  bottom: 40px;
  left: 30px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.btnTxt {
  font-size: 15px;
}
.hover:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.toHome {
  transition: 0.2s;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: white;
  display: flex;
  align-items: center;
  height: 50px;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 10px 0;
}
.navi_img {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}
.big_title {
  font-size: 32px;
  color: #ffffff;
  text-align: left;
}
.title_tip {
  text-align: left;
  font-size: 14px;
  color: #ffffff;
  margin-top: 5px;
  margin-bottom: 30px;
}
.appFrame {
  min-width: 1100px;
  height: 100vh;
  overflow-y: scroll;
  background: #eee;
  display: flex;
}
.right {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
  background: #eee;
}
.left {
  background: #3e7cf4;
  border-radius: 0 20px 20px 0;
  box-sizing: border-box;
  height: 100vh;
  min-height: 500px;
  width: 330px;
  padding: 40px 25px;
  position: relative;
}
#app {
  display: flex;
}
</style>
